<template>
  <el-table :data="tableData"
            style="width: 100%">
    <el-table-column prop="code"
                     label="合同编号"></el-table-column>
    <el-table-column prop="fromTime"
                     label="发货时间"></el-table-column>
    <el-table-column prop="toTime"
                     label="要求到货时间"></el-table-column>
    <el-table-column label="收货方信息">
      <template slot-scope="scope">
        <el-popover trigger="hover"
                    placement="top">
          <p>公司: {{ scope.row.corp }}</p>
          <p>收货联系人: {{ scope.row.name }}</p>
          <p>手机号: {{ scope.row.phone }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference"
               class="name-wrapper">
            <p effect="plain">{{ `${scope.row.corp}` }}</p>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="address"
                     label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'Column4',
  data () {
    return {
      tableData: [{
        code: 'O20230605T180145',
        fromTime: '2028-03-06 23:59',
        toTime: '2028-03-16 23:59',
        name: '张三',
        phone: '138888888888',
        corp: '上海盛研化工科技有限公司',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        code: 'O20230605T180145',
        fromTime: '2028-03-06 23:59',
        toTime: '2028-03-16 23:59',
        name: '王小虎',
        phone: '138888888888',
        corp: '上海盛研化工科技有限公司',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        code: 'O20230605T180145',
        fromTime: '2028-03-06 23:59',
        toTime: '2028-03-16 23:59',
        name: '王小虎',
        phone: '138888888888',
        corp: '上海盛研化工科技有限公司',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        code: 'O20230605T180145',
        fromTime: '2028-03-06 23:59',
        toTime: '2028-03-16 23:59',
        name: '王小虎',
        phone: '138888888888',
        corp: '上海盛研化工科技有限公司',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    }
  }
}
</script>

<style>
</style>